<template>
  <div class="playlist">
    <div class="wrap">
      <div class="img-wrap">
        <img :src="playlist.coverImgUrl+ '?param=400y400'"
             lazy='loaded'>
      </div>
      <div class="content">
        <p class="name">{{playlist.name}}</p>
        <div class="creator-wrap">
          <el-avatar class="user-avater"
                     size="medium"
                     :src="creator.avatarUrl"></el-avatar>
          <span class="nickname">{{creator.nickname}}</span>
          <span class="createTime">{{playlist.createTime | dateFormat}}创建</span>
        </div>
        <div>
          <div class="playBtn">
            <i class="el-icon-video-pause"></i>
            <span class="playText">立即播放</span>
          </div>
        </div>
        <span class="tags">标签：{{playlist.tags && playlist.tags.join('/')}}</span>
        <span class="desc">简介：{{playlist.description}}</span>
      </div>
    </div>
    <ul class="tab-wrap">
      <li :class="[selectTabs===1?'tab-item action':'tab-item']"
          @click="changeTabs(1)">歌曲列表</li>
      <li :class="[selectTabs===2?'tab-item action':'tab-item']"
          @click="changeTabs(2)">评论{{comments.length + hotComments.length}}</li>
    </ul>

    <div class="song-cards"
         v-show="selectTabs === 1">
      <songitem v-for="item,index in songs"
                :key="index"
                :data='item'
                :id='item.id'
                :order="index+1"
                :img='item.al.picUrl'
                :name='item.name'
                :author='item.ar[0].name'
                :album='item.al.name'
                :time='item.dt'></songitem>
    </div>
    <div class="comments-cards"
         v-show="selectTabs === 2">
      <div class="block"
           v-show="currentPage === 1">
        <p class="title"
           v-if="hotComments.length>0">精彩评论</p>
        <comments v-for="item,index in hotComments"
                  :key="index"
                  :avatar='item.user.avatarUrl'
                  :username='item.user.nickname'
                  :text='item.content'
                  :replied='item.beReplied'
                  :date='item.time'
                  :actions='item.likedCount'></comments>
      </div>
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange"
                       :current-page.sync="currentPage"
                       :page-size="pageSize"
                       layout="total, prev, pager, next"
                       :total="total"
                       v-show="total > pageSize">
        </el-pagination>
      </div>
      <div class="block">
        <p class="title"
           v-if="comments.length>0">最新评论</p>
        <comments v-for="item,index in comments"
                  :key="index"
                  :avatar='item.user.avatarUrl'
                  :username='item.user.nickname'
                  :text='item.content'
                  :replied='item.beReplied'
                  :date='item.time'
                  :actions='item.likedCount'></comments>
      </div>
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange"
                       :current-page.sync="currentPage"
                       :page-size="pageSize"
                       layout="total, prev, pager, next"
                       :total="total"
                       v-show="total > pageSize">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getListDetail, genSonglist, genHotCommentlist, genCommentlist } from '@/network/playlist'
import songitem from '@/components/songitem'
import comments from '@/components/comments'
const MAX = 500
export default {
  components: {
    songitem,
    comments
  },
  data () {
    return {
      // 歌单ID
      id: null,
      // 歌单数据
      playlist: {},
      // 创建者信息
      creator: {},
      // 歌曲列表
      songs: [],
      // 精彩评论
      hotComments: [],
      // 最新评论
      comments: [],
      // 歌曲和评论切页  1 歌曲 2评论
      selectTabs: 1,
      // 分页查询
      total: 0,
      pageSize: 20,
      offset: 0,
      currentPage: 1
    }
  },
  created () {
    this.id = this.$route.params.id
    // this.getListDetail()
  },
  methods: {
    getListDetail () {
      getListDetail(this.id).then(res => {
        if (!res || res.code !== 200) { return this.$message.error('请求失败!') }
        this.playlist = res.playlist
        this.creator = res.playlist.creator
        this.genSonglist()
        this.genHotCommentlist()
        this.genCommentlist()
      })
    },
    genSonglist () {
      const trackIds = this.playlist.trackIds.map(({ id }) => id)
      genSonglist(trackIds.slice(0, MAX)).then(res => {
        if (!res || res.code !== 200) { return this.$message.error('请求失败!') }
        this.songs = res.songs
      })
    },
    genHotCommentlist () {
      genHotCommentlist(this.id, 2).then(res => {
        if (!res || res.code !== 200) { return this.$message.error('请求失败!') }
        this.hotComments = res.hotComments
      })
    },
    genCommentlist () {
      this.currentPage = this.currentPage || 1
      this.offset = (this.currentPage - 1) * this.pageSize
      genCommentlist(this.id, this.pageSize, this.offset).then(res => {
        if (!res || res.code !== 200) { return this.$message.error('请求失败!') }

        this.comments = res.comments
        this.total = res.total
      })
    },
    changeTabs (tabs) {
      this.selectTabs = tabs
    },
    // 下一页
    handleCurrentChange () {
      // TODO返回顶部
      this.genCommentlist()
    }
  },
  watch: {

    $route: {
      handler (route) {
        if (route.name == 'playlist') {
          this.id = route.params.id
          this.selectTabs = 1
          this.getListDetail()
        }
      },
      immediate: true
    }
  }
}
</script>
 <style lang='less' scoped>
.playlist {
  .wrap {
    display: flex;
    padding-left: 0.219619rem;
    color: #333333;
    .img-wrap {
      height: 1.464129rem;
      width: 1.464129rem;
      margin-right: 0.183016rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .content {
      display: flex;
      flex: 1;
      flex-direction: column;
      font-size: 0.102489rem;
      .name {
        font-size: 0.11713rem;
        margin-bottom: 0.131772rem;
      }
      .creator-wrap {
        display: flex;
        align-items: center;
        margin-bottom: 0.131772rem;
        .user-avater {
          width: 0.263543rem;
          height: 0.263543rem;
          margin-right: 0.058565rem;
        }
        .nickname {
          margin-right: 0.058565rem;
        }
        .createTime {
          font-size: 0.087848rem;
        }
      }
      .playBtn {
        display: inline-block;
        color: #fff;
        background: linear-gradient(90deg, #fa5143, #f44d41, #d53b32);
        padding: 0.036603rem 0.11713rem;
        vertical-align: middle;
        margin-bottom: 0.131772rem;
        cursor: pointer;
        i {
          margin-right: 0.036603rem;
        }
      }
      .tags {
        margin-bottom: 0.058565rem;
      }
      .desc {
        margin-bottom: 0.058565rem;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
  }

  .tab-wrap {
    display: flex;
    border-bottom: 1px solid #f2f2f1;
    .tab-item {
      cursor: pointer;
      font-size: 0.102489rem;
      padding: 0.087848rem 0;
      margin: 0 0.087848rem;
    }
    .action {
      color: red;
      border-bottom: 2px solid red;
    }
  }

  .comments-cards {
    .block {
      margin-bottom: 0.292826rem;
      .title {
        font-size: 0.11713rem;
        margin-bottom: 0.029283rem;
        font-weight: bold;
      }
    }
  }
}
</style>
